<template>
  <div class="firm_container">
    <div class="box">
      <div class="bg_img">
        <img class="getHeight" src="/web-hft-ee/static/img/enterprise_course/classroom_bg.png">
      </div>
      <div class="enterprise_tabs">
        <van-tabs swipeable="true" v-model="active" title-active-color="#D5B67F" color="#D5B67F"
                  title-inactive-color="#D5B67F" background="transparent">
          <van-tab v-for="(el,index) in gradeList" :title="el.title" :key="index" class="grade_list_position">
            <div @click="onClick(el)" class="chose_card_list">
              <img :src="el.pic">
              <p class="grade_absolute_btn" v-if="el.id===45">免费试用</p>
              <p class="grade_absolute_btn" v-else> ￥{{el.price}}/月</p>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>

    <div class="virtualHeight"></div>
    <div id="intro" style="height: 10px; background: white"></div>
    <div v-for="el in imgList">
      <img width="100%" :src="el">
    </div>

  </div>
</template>

<script>
  import {Swiper, SwiperSlide} from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'
  import {Tab, Tabs, Toast} from 'vant';
  import $ from 'jquery'
  import store from "../../../repo/store/store";
  import {setCookie} from "as-common";
  import {LoginType} from "../../../repo/env/Constants";
  import EnterpriseLevelAPI from "../../../repo/api/EnterpriseLevelAPI";
  import PackageMixIn from "./PackageMixIn";

  Vue.use(Tab);
  Vue.use(Tabs);
  export default {
    name: 'swiper-example-multiple-slides-per-biew',
    title: 'Multiple slides per view',
    components: {
      Swiper,
      SwiperSlide
    },
    mixins: [PackageMixIn],
    data() {
      return {
        getHeight: 677,
        imgList: [
          '/web-hft-ee/static/img/enterprise_course/classroom_1.jpg',
          '/web-hft-ee/static/img/enterprise_course/classroom_2.jpg',
          '/web-hft-ee/static/img/enterprise_course/classroom_3.jpg',
          '/web-hft-ee/static/img/enterprise_course/classroom_4.jpg'
        ],
        gradeList: []

      }
    },
    mounted() {

      setTimeout(() => { //a callback after page is rendered
        this.getHeight = $('.enterprise_tabs').height() + $('.getHeight').height() - 119;
        if (location.hash === '#intro') {
          this.$nextTick(() => {
            document.querySelector("#intro").scrollIntoView({behavior: "smooth"})
          })
        }
      }, 500)

    },
    methods: {
      onClick(data) {
        //If you're not login in, you need login in first
        let hsId = store.getters.hsId;
        let loginType = store.getters.loginType;

        if (!store.getters.hasLogged) {
          Toast('请先登录')
          return;
          //If you join a store, but you are not the administrator, cannot buy it
          // 0 == 成员
          // 1 == 管理员
          // 2 == 超级管理员
        } else if (store.getters.enterpriseInfo.enterprise && store.getters.enterpriseRoleInfo.roleType === 0) {
          Toast('不是管理员无法购买');
          return;
          //If u don't have a enterprise,register one
        } else if (!store.getters.enterpriseInfo.enterprise) {
          window.location.href = window.location.origin + `/web-hft-ee/enroll/${loginType}/` + hsId + '?targetType=' + data.id
          return;

        }
        //free version do not jump page
        if (data.id === 45) {
          //Trail packages are available only once
          if (this.firstFreeLimit === 1) {
            Toast('试用套餐仅可试用一次');
            return;
          }
          this.addOrder(data.id);
          return;
        }

        // this.$router.push({
        //   name: 'package-buy',
        //   query: {
        //     targetType: data.id,
        //   }
        // })
        //由于微信支付的问题，地址不一致。

        window.location.href = window.location.origin + `/web-hft-ee/package-buy/${loginType}/` + hsId + '?targetType=' + data.id

      },
      fetchData() {
        EnterpriseLevelAPI.getGroupLevelPayTypeList().then((result) => {
          this.gradeList = result.responseData.list;
        });

      },
    }
  }
</script>
<style scoped>
  .box {
    position: relative;
    height: inherit;
  }

  .bg_img {
    position: absolute;

  }

  .enterprise_tabs {
    position: absolute;
    top: 88px;
    width: 100%;

  }

  .bg_img img {
    width: 100%;

  }

  .chose_card_list {
    width: 90%;
    margin: 20px auto 40px auto;

  }

  .chose_card_list > img {
    width: 100%;
  }

  .virtualHeight {
    background: white;
    height: 677px;
  }

  /deep/ .van-tab--active {
    font-size: 18px;
  }

  .grade_list_position {
  }

  .grade_absolute_btn {
    width: 180px;
    position: absolute;
    bottom: 13%;
    background: rgba(0, 0, 0, .2);
    left: calc((100% / 2) - 90px);
    border-radius: 20px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: white;

  }
</style>
